<script setup>
import { computed, ref } from 'vue'
import { useTaskStore } from '@/stores/task.js'
const taskStores = useTaskStore()
// 当前被选中选项的索引值
const tabIndex = ref(-1)

// 接收传入组件的数据
const props = defineProps({
	types: Array, // 父组件的数字
	dataKey: String //父组件类型标识符
})

// 点击选中选项
function onOptionSelect(index, id, text) {
	// 高亮显示选中的选项
	tabIndex.value = index
	//props.dataKey 是对应的类型
	taskStores.recordData[props.dataKey] = id //  把当前类型的下标赋值给 当前类型
	console.log('哪个类型', props.dataKey)
	console.log('text', text)
}
</script>

<template>
	<!-- 是否 -->
	<view class="vehicle-options">
		<view class="option" :class="{ active: tabIndex === index }" v-for="(item, index) in props.types" :key="item.id" @click="onOptionSelect(index, item.id, item.text)">
			{{ item.text }}
		</view>
	</view>
</template>

<style lang="scss" scoped>
.vehicle-options {
	display: flex;
	flex-wrap: wrap;
	font-size: $uni-font-size-small;

	.option {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 70rpx;
		padding-top: 1rpx;
		margin-top: 30rpx;
		margin-right: 38rpx;
		color: $uni-secondary-color;
		border: 2rpx solid $uni-bg-color;
		background-color: $uni-bg-color;
		border-radius: 20rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}

		&.active {
			color: $uni-primary;
			border: 2rpx solid $uni-primary;
			background-color: #ffe0dd;
		}
	}
}
</style>
